<template>
  <div>
    <van-row>
      <van-col class="icon" span="24">
        <van-image
          round
          width="2rem"
          height="2rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </van-col>
    </van-row>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="repeat"
        type="password"
        name="再次密码"
        label="再次密码"
        placeholder="再次输入密码"
        :rules="[{ required: true, message: '请填再次输入密码' }]"
      />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      repeat: "",
    };
  },
  methods: {
    // 注册功能
    onSubmit(values) {
      if (this.password == this.repeat) {
        console.log("submit", values);
        let account = this.username;
        let password = this.password;
        this.$axios
          .post("http://www.jiaoyisen.com:8887/api/register", {
            account,
            password,
          })
          .then((res) => {
            console.log(res);
            console.log(res.data.message);
            this.$router.push("./index");
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.icon {
  padding: 1rem 0;
  text-align: center;
}
.gozc {
  margin-top: 3rem;
  font-size: 0.18rem;
  color: #68b0ff;
  text-align: center;
  text-decoration: underline;
}
</style>